<template>
  <div class="app-container">
    <div class="tip d-flex">
      <el-input
        v-model.trim="serialno"
        class="wd300"
        clearable
        placeholder="扫码或者输入设备编号"
        size="medium"
      >
        <template slot="prepend">设备编号</template>
      </el-input>
      <el-button class="mlauto" type="primary" @click="showPopup()">
        提交
      </el-button>
    </div>
    <div class="h12"></div>
    <vxe-table
      align="center"
      border
      :checkbox-config="{ highlight: true, range: true }"
      :column-config="{ resizable: true }"
      :data="tableData"
      height="85%"
      :loading="loading"
      :row-config="{ isHover: true }"
      stripe
    >
      <vxe-column type="checkbox" width="140" />
      <vxe-column type="seq" width="70" />
      <vxe-column field="product_name" title="设备类型" />
      <vxe-column field="serialno" title="设备编号" />
      <vxe-column field="rtuid" sortable title="站号" />
      <vxe-column field="gw_serialno" show-overflow title="网关编号" />
    </vxe-table>
    <vxe-modal v-model="dialogVisible" :height="400" :width="600">
      <vxe-form
        ref="formRef"
        :data="formData"
        title-align="right"
        title-colon
        title-width="80px"
        @reset="resetEvent"
        @submit="submitEvent"
      >
        <vxe-form-item
          field="protocol"
          :item-render="{}"
          span="24"
          title="通信类型"
        >
          <vxe-radio-group v-model="formData.protocol">
            <vxe-radio-button
              v-for="(item, index) in protocols"
              :key="index"
              :content="item.label"
              :label="item.value"
            />
          </vxe-radio-group>
        </vxe-form-item>
        <vxe-form-item field="sex" :item-render="{}" span="12" title="网关编号">
          <vxe-input
            v-model="formData.gw_serialno"
            clearable
            placeholder="网关编号"
          />
        </vxe-form-item>
        <vxe-form-item field="sex" :item-render="{}" span="12" title="起始站号">
          <vxe-number-input
            v-model="formData.rtuid"
            clearable
            placeholder="起始站号"
          />
        </vxe-form-item>
        <vxe-form-item align="left" :item-render="{}" span="24">
          <template #default>
            <vxe-button content="提交" status="primary" type="submit" />
            <vxe-button content="重置" type="reset" />
          </template>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>
  </div>
</template>

<script>
  import { doFind, doComm } from '@/api/device'
  import { VxeUI } from 'vxe-pc-ui'
  const tableData = []
  const formData = {
    protocol: 'LoRa',
    gw_serialno: '4337B9D76146DDCF',
    rtuid: 61,
  }
  export default {
    data() {
      return {
        serialno: '',
        loading: false,
        tableData,
        dialogVisible: false,
        formData,
        protocols: [
          { value: 'LoRa', label: 'LoRa' },
          { value: '4G', label: '4G' },
        ],
        product_serialno: '',
      }
    },
    watch: {
      serialno(e) {
        if (e && e.length === 20) {
          if (!this.tableData.map((val) => val.serialno).includes(e)) {
            this.loading = true
            doFind(e)
              .then((res) => {
                const {
                  data: { serialno, product },
                } = res
                this.tableData.unshift({
                  product_name: product.name,
                  serialno: serialno,
                  rtuid: '',
                  gw_serialno: '',
                })
                this.serialno = ''
                this.product_serialno = product.serialno
                this.loading = false
              })
              .catch((err) => {
                console.log(err)
                this.loading = false
              })
          }
        }
      },
    },
    methods: {
      showPopup() {
        if (this.tableData.length > 0) {
          this.dialogVisible = true
        }
      },
      submitEvent() {
        const { gw_serialno, rtuid, protocol } = this.formData
        // const serialno = this.tableData[0].product.serialno
        const tableData = []
        this.tableData.forEach((val, index) => {
          val.gw_serialno = gw_serialno
          val.rtuid = rtuid + index
          tableData.push(val)
        })
        this.tableData = tableData

        const postData = {
          serialno: this.product_serialno,
          protocol,
          datas: this.tableData.map((val) => {
            const { gw_serialno, rtuid, serialno } = val
            return { gw_serialno, rtuid, serialno }
          }),
        }

        this.loading = true
        doComm(postData)
          .then((res) => {
            VxeUI.modal.message({
              content: res.msg,
              status: 'success',
            })
            this.dialogVisible = false
            this.loading = false
            this.tableData = []
          })
          .catch((err) => {
            console.log(err)
            this.loading = false
          })
      },
      resetEvent() {
        this.formData = formData
      },
    },
  }
</script>
